<template>
	<view class="container">
		<view class="item" v-for="(item,index) in landmarkList" :key="index" @tap="goDetail(item.id)">
			<image lazy-load :src="item.img" mode="aspectFill"></image>
			<view class="infoBox">
				<view class="title">
					<view class="title__name">
						<text class="name">{{item.title}}</text>
						<text class="back" v-if="Number(item.keywords) > 1">{{item.keywords}}A</text>
						<text class="back a" v-else-if="Number(item.keywords) == 1">主题区</text>
						<text class="back b" v-else>免预约</text>
					</view>
				</view>
				<view class="desc clamp2">
					{{item.content}}
				</view>
				<view class="long">
					<uni-icons class="icon" type="location-filled" color="#999" size="16"></uni-icons>
					<text>距您{{item.distance}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			landmarkList: {
				type: Array,
			}
		},

		data() {
			return {}
		},
		methods: {
			//详情页
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/center/vip/tourismProduct?id=" + id
				})
			}
		}
	}
</script>
</script>

<style lang="scss" scoped>
	.item {
		box-sizing: border-box;
		width: 750rpx;
		height: 250rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;
		border-top: 10rpx solid #f8f8f8;
	
		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
		}
	
		.infoBox {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 470rpx;
	
			.title {
				display: flex;
				justify-content: space-between;
	
				.title__name {
					letter-spacing: 0.5rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					font-size: 30rpx;
					max-width: 470rpx;
					display: flex;
					align-items: center;
	
					.name {
						flex: 1;
						height: 40rpx;
						line-height: 40rpx;
						overflow: hidden;
						display: block;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.back {
						padding:3rpx 10rpx;
						background: #E5F9E9;
						text-align: center;
						border-radius: 10rpx;
						font-size: 20rpx;
						font-weight: normal;
						color: #57BE6A;
						margin-left: 8rpx;
					}
					.a{
						background: #FFF0EE;
						color: #FC7D68;
					}
					.b{
						background: #FFEFE1;
						color: #F89034;
					}
				}
			}
	
			.desc {
				font-size: 24rpx;
				color: #666;
				line-height: 40rpx;
			}
	
			.long {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				.icon{
					margin-left: -6rpx;
				}
				text{
					margin-left: 4rpx;
				}
			}
		}
	}
</style>
